<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #div1{
            height:20px;
            width: 50px;
            background: red;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <!--     2.验证码匹配的问题 -->
    用户名：<input type="text" id="input1" placeholder="请输入用户名">
    <br>
    密码：<input type="password" id="password1" placeholder="请输入密码">
    <br>
    <input type="text" id="shuru" placeholder="请输入四位数验证码">
    <br>
    <button>确定</button>

    <div id="div1"></div>

    <script>
        var input1=document.querySelector('#input1');
        var password1=document.querySelector('#password1');
        var shuru=document.querySelector('#shuru');
        var butto=document.getElementsByTagName('button')[0];
        div1.innerHTML=parseInt(Math.random()*(10000-1000)+1000);
       div1.onclick=function(){
            this.innerHTML=parseInt(Math.random()*(10000-1000)+1000);
            console.log(this.innerHTML);   
       }
       butto.onclick=function(){
        if(shuru.value==div1.innerHTML){
                alert('输入正确')
            }else{
                alert('请输入正确的验证码')
            }
        }  
    

    </script>





</body>
</html>